﻿/* normalize reset */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
  margin: 0;
  padding: 0;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
  display: block;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
*::after,
*::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  content: '';
  position: absolute;
}
body {
  position: relative;
}
a:active,
a:hover,
:focus,
[hidefocus],
summary {
  outline: none;
}
::-moz-focus-inner {
  border-color: transparent;
}
/*for mozilla*/
.glyphicon {
  cursor: default;
}
a,
a .glyphicon,
a.glyphicon,
label {
  cursor: pointer;
}
del,
ins,
u,
s,
a,
a:hover {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
  font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
  font-size: 100%;
}
i,
cite,
em,
var,
address,
dfn {
  font-style: normal;
}
sup,
sub {
  font-size: 83%;
}
pre,
code,
kbd,
samp {
  font-family: inherit;
}
li {
  list-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
textarea {
  overflow: auto;
  resize: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/* sizing */
/* background */
/* text */
/* radius */
/* arrow */
/* buttons */
/* opacity background */
/* @media screen */
/* clear float */
.clear {
  height: 0;
  clear: both;
  overflow: hidden;
}
/* float */
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: normal 100% Helvetica, Arial, sans-serif; 
  -webkit-text-size-adjust:none;
}
.clear {
  height: 0;
  overflow: hidden;
  clear: both;
}
/* header start */
header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  background-color: #202020;
  /*border-right: 8px solid #282828;*/
}
header h1 {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
header h1 a {
  display: block;
  width: 100%;
  height: 80px;
  position: relative;
  /*background-color: #fff;*/
}
header h1 a span,
header h1 a i {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  margin-top:20px;
  
}
header h1 a span {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/logo1.jpg);
  background-size:60%;
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
header h1 a i {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/logo2.jpg);
  background-size:60%;
  opacity: 0;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
html.ie8 header h1 a i {
  display: none;
}
header h1 a:hover span {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  opacity: 0;
}
html.ie8 header h1 a:hover span {
  display: none;
}
header h1 a:hover i {
  opacity: 1;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
html.ie8 header h1 a:hover i {
  display: block;
}
@media (max-width:1367px) {
  header h1 a span{
    background-size: 70%;
  }
  header h1 a i {
    background-size: 70%;
  }
}
header nav {
  position: relative;
  z-index: 9999;
}
header nav ul {
  margin: 0 auto 15px;
  padding-top: 40%;
}
header nav ul li {
  padding: 20px 0;
   moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
  -o-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box;
}

html.ie8 header nav ul li {
  margin: 0;
  
}
header nav ul li a {
  font-size: 18px; 
  display: block;
  color: #e6e6e6;    
  /*text-align: center;*/
  padding-left:30%;
  position: relative;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
 
}

html.ie8 header nav ul li a:after {
  display: none;
}
header nav ul li a:hover,
header nav ul li a.on {
  color: #6ec6e0;
}
header nav ul li a:hover:after,
header nav ul li a.on:after {
  opacity: 1;
  left: 45px;
}
html.ie8 header nav ul li a:hover:after,
html.ie8 header nav ul li a.on:after {
  display: block;
}
header #scan{
  position: absolute;
  left:0;
  bottom:15px;
  font-size:12px; 
  line-height:20px;
  width:100%;
  display: flex;
  display: -webkit-box;
  flex-direction: column;
  -webkit-box-orient: vertical;
  align-self: center;
  -webkit-box-align: center;  
}
header #scan p a{
  color:#bbb;
}
header #scan img{
  width:100%; 
  margin-bottom: 20px;
}

@media (max-width:1367px) {
  header nav ul li {
    padding:10px 0;
  }
  header nav ul li a {
    font-size: 15px;
  }

   header #scan{  
    padding:0 10%;
  }
}
/*header end*/
/* footer start */
footer {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
}
footer .share {
  width: auto;
  height: 30px;
  float: left;
  margin-right: 25px;
}
footer .share a {
  float: left;
  width: 23px;
  height: 100%;
  background-color: #4f4f4f;
  margin: 0 0 0 25px;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease; 
}
footer .share a span {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/icon-share.png);
  background-repeat: no-repeat;
}
footer .share a:hover {
  background-color: #e50012;
}
footer .share a.a1 span {
  background-position: -23px 0;
}
footer .share a.a2 span {
  background-position: -67px 0;
}
footer .share a.a3 span {
  background-position: -112px 0;
}
footer p {
  color: #4f4f4f;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
footer p a {
  color: #4f4f4f;
  margin: 0 5px;
}
footer p a:hover {
  color: #e50012;
}
footer p span {
  float: right;
  margin-right: 10px;
}
/* footer end */
/* main content start*/
.main-content {
  width: 100%;
  height: 100%;
  padding-left: 15%;
  overflow-x: hidden;/*去掉后动态中的二级栏目会出问题*/
  content: '';
  position:relative;
}

/* main content end*/

.home-content {
  overflow: hidden;
  position: relative;
  /* switch arrow */
}
.home-content .scene {
  width: 100%;
  height: 100%;
  box-sizing:border-box;  
  background:url('http://p5b8mmggl.bkt.clouddn.com/bg.png') no-repeat  center;
  background-size:100% 100%;
}
.home-content .scene .carousel {  
	width: 100%;
	height:100%;
  display: flex;
  -webkit-box:flex;
  background:rgba(0,0,0,0.3);
  overflow: hidden;
}
.home-content .carousel .item {   
	height:100%;
  flex:1;
  -webkit-box-flex:1;
  opacity: 0;
  -webkit-transition: 0.6s all ease;
  transition: 0.6s all ease;
  position: relative;
  -webkit-box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);  
	overflow-y: auto; 
	overflow-y:-moz-auto;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style:none;
  /*火狐下隐藏滚动条*/
  overflow:-moz-scrollbars-none;
  /* scroll style */
}
.home-content .carousel .item::-webkit-scrollbar {display:none}

html.ie8 .home-content .item {
  border-right: 1px solid #;
}
.home-content .item .content {
  width: 100%;    
  opacity: 0;  
  -webkit-transform: translate(0, 150px);
  transform: translate(0, 150px);
}
.home-content .item:hover{
	background:rgba(110,198,224,0.5);
}
.home-content .item:hover .content {   
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
  -webkit-transition: 0.5s all ease-in-out 0.2s;
  transition: 0.5s all ease-in-out 0.2s;
}
.home-content .item:hover .mask { 
  display: none;  
}
.home-content .item .mask{
	display: flex;
	-webkit-box:flex;
	flex-direction: column;
	-webkit-box-orient: vertical;	
	align-items: center;
	-webkit-box-align:center;
	margin:30vh 0;
	position:relative;	
}
.home-content .item .mask img{
	width:25%;
}
.home-content .item .mask h3{
	font-size:15px;
	color:#6bc5df;
	line-height:100px;
}
.home-content .item .mask .mask_line:after {
  position: absolute;  
  width: 55px;
  height: 5px;  
  content: '';
  left:0;
  right:0;
  margin:auto;
  bottom: 0px; 
  background-color: #6bc5df;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}



.home-content .item .icon_img{
	width:100%;
	text-align: center;
	margin-top:15%;
}
.home-content .item .icon_img a{
	display:block;
	width:100%;	
}
.home-content .item .icon_img a img{
	width:25%;
}

.home-content .item .title {
  font-size: 20px;
  text-align: center;
  margin: 35px 0 30px ;
 
}
.home-content .item .title a {
  display: block;
  position: relative;
  padding: 20px 0;
  color:#fff;
}
.home-content .item .title p {
 	text-align: center;
 	display: block; 
 	width:60%;  
 	margin-left:20%;
 	line-height:26px;
 	font-weight:100;
 	font-size:16px; 
  color:#fff;
}
@media (max-width:1367px) {
  .home-content .item .title p{
    font-size: 13px;
  }
}
.home-content .item .item_more{
	width:100%;
	text-align: center;
	margin-bottom:45px;
}
.home-content .item .item_more a{
	background:#fff;
	border-radius:30px;	
	line-height:30px;
	font-size:16px;
	color:#6bc5df;
	padding:5px 15px;
}
.home-content .item .item_more a:hover{
	background:#6bc5df;
	color:#fff;
	transition:0.5s all esse;
	-webkit-transition:0.5s all ease;
	
}

.home-content .item .group {
  padding: 15px 8%;
  clear: both;
  position: relative;
}

.home-content .item .group span {
  float: left;  
  width:20%;
  height:66px;
  overflow: hidden;
  margin-right:15px; 
  border-right:1px solid #72a7b7; 
}
.home-content .item .group.group01 span {
	 background: url('http://p5b8mmggl.bkt.clouddn.com/one.png') no-repeat left center;
  background-size:80%;
}
.home-content .item .group.group02 span {
	 background: url('http://p5b8mmggl.bkt.clouddn.com/two.png') no-repeat left center;
   background-size:80%;
}
.home-content .item .group.group03 span {
	 background: url('http://p5b8mmggl.bkt.clouddn.com/thr.png') no-repeat left center;
   background-size:80%;
}
.home-content .item .group.group04 span {
	 background: url('http://p5b8mmggl.bkt.clouddn.com/four.png') no-repeat left center;
   background-size:80%;
}
.home-content .item .group.group05 span {
	 background: url('http://p5b8mmggl.bkt.clouddn.com/fiv.png') no-repeat left center;
   background-size:80%;
}

.home-content .item .group:hover {
 padding: 15px 8%;
 background:rgba(0,0,0,0.4);
 -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
}
.home-content .item .group:hover span{
 width:30%; 
 padding:0;
 margin-right:10px;
 background:rgba(0,0,0,0.4);
 background: url('http://p5b8mmggl.bkt.clouddn.com/design.png') no-repeat left center;
 background-size:95%;
-webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}


.home-content .item .group h3 {
  font-size: 16px;
  margin-bottom: 5px;
}
.home-content .item .group h3 a {
  color: #fff;
}
.home-content .item .group p {
  font-size: 12px;
}
.home-content .item .group p a {
  color: #fff;
}
.home-content .item .group p a {
  color: #fff;
}

@media (max-width:1367px) {
  .home-content .item .group h3{
    font-size: 14px;
  }
  /* .home-content .item .group p {
    font-size: 10px;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    padding-left: -30px;
    } */
}
.home-content .item.item1 {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.home-content .item.item1 .group a:hover {
  text-decoration: underline;  
}
.home-content .item.item1 .group:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.home-content .item.item2 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.home-content .item.item2 .contact {
  width: 100%;
  text-align: center;
  background: none;
}
.home-content .item.item2 .contact a {
  display: inline-block;
}
.home-content .item.item2 .contact a span {
  width: 70px;
  height: 70px;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}
.home-content .item.item2 .contact a i {
  font-size: 14px;
  color: #fff;
}
.home-content .item.item2 .contact a i small {
  font-size: 12px;
  display: block;
}
.home-content .item.item2 .contact a.a1 span {
  background-image: url(../images/home/icon-item21.png);
}
.home-content .item.item2 .contact a.a2 {
  margin: 0 10%;
}
.home-content .item.item2 .contact a.a2 span {
  background-image: url(../images/home/icon-item22.png);
}
.home-content .item.item2 .contact a.a3 span {
  background-image: url(../images/home/icon-item23.png);
}
.home-content .item.item2 .contact a:hover i {
  color: #e50012;
}
.home-content .item.item2 .contact a:hover.a1 span {
  background-image: url(../images/home/icon-item211.png);
}
.home-content .item.item2 .contact a:hover.a2 {
  margin: 0 10%;
}
.home-content .item.item2 .contact a:hover.a2 span {
  background-image: url(../images/home/icon-item222.png);
}
.home-content .item.item2 .contact a:hover.a3 span {
  background-image: url(../images/home/icon-item233.png);
}
.home-content .item.item2 .intro {
  padding: 0 10%;
}
.home-content .item.item2 .intro h3 {
  margin: 40px auto 0;
  clear: both;
}
.home-content .item.item2 .intro h3 img {
  float: left;
}
.home-content .item.item2 .intro h3 a {
  float: right;
  font-size: 12px;
  color: #868686;
  font-weight: normal;
}
.home-content .item.item2 .intro .endcy {
  margin-top: 40px;
}
.home-content .item.item2 .intro .endcy span {
  float: left;
  width: 66px;
  height: 66px;
  overflow: hidden;
  margin-right: 20px;
}
.home-content .item.item2 .intro .endcy span img {
   width: 100%;

	transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-moz-transition:all ease .3s;
	-o-transition:all ease .3s;
	-ms-transition:all ease .3s;
}

.home-content .item.item2 .intro .endcy span:hover img{
	stransform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
}
.home-content .item.item2 .intro .endcy p {
  font-size: 12px;
  line-height:22px;height:22px;overflow:hidden;
}

.home-content .item .title2 {
  font-size: 20px;
  text-align: center;
  margin: 40px auto 0;
}
.home-content .item .title2 a {
  display: block;
  position: relative;
  padding: 20px 0;
  color:#000;
}
.home-content .item .title2 a:after {
  position: absolute;
  width: 28px;
  height: 5px;
  background-color: #e50012;
  content: '';
  left: 50%;
  margin-left: -14px;
  bottom: 0px;
  opacity: 0;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
html.ie8 .home-content .item .title2 a:after {
  display: none;
}
.home-content .item .title2 a:hover:after {
  opacity: 1;
  bottom: 10px;
}
html.ie8 .home-content .item .title2 a:hover:after {
  display: block;
}

/*item3*/
.home-content .item.item3 .group span{
	border:none;
	margin:0;
	padding:0;	
	margin-right:-10px;
}
.home-content .item.item3 .group:hover span{
	border-right: 1px solid #72a7b7;
	margin-right:15px;
}

/*item4*/

.home-content .item .item_ul{
	width:100%;
  height: auto;  
	display: flex;
	-webkit-box:flex;
	flex-direction: column;
	-webkit-box-orient: vertical;
  align-items:  center;
  -webkit-box-align: center;
}
.home-content .item .item_ul li{
	width:50%;	
}

.home-content .item .item_ul li a{
	width:100%;	
  height: 130px;
  margin-bottom:20px;
	display: block;
	text-align: center;  
  position: relative;  
}
.home-content .item .item_ul li a .item_tit{  
  width:100%;
  height: 100%;  
  line-height: 130px;
  background: rgba(0,0,0,0.6);
  color:#fff;
  position: absolute;
  left:0;
  top: 0;
  z-index: 20;
   -webkit-transform: translate(-50px,0 );
  transform: translate(-50px,0);
  opacity: 0;
  letter-spacing: 5px;
  font-weight: 900;
  
}
@media (max-width:1367px) {
  .home-content .item .item_ul li a{
    height: 80px;
  }
  .home-content .item .item_ul li a .item_tit{ 
  line-height:80px;
  }

}
.home-content .item .item_ul li a img{
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
	
}
.home-content .item .item_ul li:hover a .item_tit{
	display: block;
	z-index: 20;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
  -webkit-transition: 0.4s all ease-in-out 0.2s;
  transition: 0.4s all ease-in-out 0.2s;
}

.home-content .item.item4 {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
  z-index: 10;
}
.home-content .item.item4 .pano {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  margin-bottom: 20px;
}
.home-content .item.item4 .pano a {
  display: inline-block;
  position: relative;
  width: 50%;
  height: auto;
}
.home-content .item.item4 .pano1 a {
  display: inline-block;
  position: relative;
  width: 33.33%;
  height: auto;
  margin-bottom: 20px;
}
.home-content .item.item4 .pano a span {
  display: block;
  width: 100%;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  height: 58px;
  margin-bottom: 15px;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}

.home-content .item.item4 .pano a span.p011 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic14.png);
}
.home-content .item.item4 .pano a span.p11 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic24.png);
}
.home-content .item.item4 .pano a span.p21 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic05.png);
}
.home-content .item.item4 .pano a span.p31 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic16.png);
}
.home-content .item.item4 .pano a span.p41 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic22.png);
}
.home-content .item.item4 .pano a span.p51 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic20.png);
}
.home-content .item.item4 .pano a span.p61 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic10.png);
}
.home-content .item.item4 .pano a span.p71 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic08.png);
}
.home-content .item.item4 .pano a span.p81 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic12.png);
}


.home-content .item.item4 .pano a i {
  display: block;
  color: #fff;
  font-size: 14px;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
.home-content .item.item4 .pano a:hover i {
  color: #69dcff;
}


.home-content .item.item4 .pano a:hover span.p011 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic15.png);
}
.home-content .item.item4 .pano a:hover span.p11 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic25.png);
}
.home-content .item.item4 .pano a:hover span.p21 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic06.png);
}
.home-content .item.item4 .pano a:hover span.p31 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic17.png);
}
.home-content .item.item4 .pano a:hover span.p41 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic23.png);
}
.home-content .item.item4 .pano a:hover span.p51 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic21.png);
}
.home-content .item.item4 .pano a:hover span.p61 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic11.png);
}
.home-content .item.item4 .pano a:hover span.p71 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic09.png);
}
.home-content .item.item4 .pano a:hover span.p81 {
  background-image: url(http://p5b8mmggl.bkt.clouddn.com/pic13.png);
}


.home-content .item.item4 .pano.last {
  margin-bottom: 50px;
}

.
.home-content .item .mCSB_container {
  margin: 0 !important;
}
.home-content .item .mCS-light-thin > .mCSB_scrollTools .mCSB_draggerRail {
  background: none;
}
.home-content .item .mCustomScrollBox > .mCSB_scrollTools {
  width: 8px;
  opacity: 0;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
html.ie8 .home-content .item .mCustomScrollBox > .mCSB_scrollTools {
  display: block;
  opacity: 1;
}
.home-content .item .mCSB_scrollTools .mCSB_dragger {
  background-color: rgba(134, 134, 134, 0.35);
  border-radius: 8px;
  height: 75%;
}
html.ie8 .home-content .item .mCSB_scrollTools .mCSB_dragger {
  background-color: #868686;
}
.home-content .item:hover .mCustomScrollBox .mCSB_scrollTools {
  opacity: 1;
}
html.ie8 .home-content .item:hover .mCustomScrollBox .mCSB_scrollTools {
  display: block !important;
}
.home-content .item:hover .mCSB_scrollTools .mCSB_dragger {
  opacity: 1;
}
.home-content.on .item {
  opacity: 1;
}
.set_phone{
  width: 200px;
  position: fixed;
  right:2%;
  top: 20%;
  bottom:80%;
 
  z-index: 999;
}
.set_phone img{
  width: 100%;  
}

@media (max-width:1367px) {
  .set_phone{
    width: 150px;
    position: fixed;
    right:2%;
    top: 20%;
    bottom:80%;   
    z-index: 999;
  }
    .set_phone img{
      width: 100%;  
}
}